<template>
  <div>
    <p ref="text">我是p标签</p>
    <h3 ref="title">我是h3标签</h3>

    <!-- 我想通过代码找到son这个组件 -->
    <son id="son" ref="son"/>
  </div>
</template>

<script>

import son from './components/son'

export default {
  components: {
    son
  },

  mounted () {

    // mounted是最早能访问到dom钩子
    console.log( this.$refs.text )   // 就访问到p标签
    console.log( this.$refs.title )  // 就访问到h3标签

    // 因为如果用ref配合$refs，就能正确找到组件对象
    // 而不是这种标签
    // let son = document.querySelector('#son')
    // console.log(son)

    // 这时候找到的组件对象，就相当于是son里面的this
    console.log( this.$refs.son )
    console.log( this.$refs.son.msg ) // 输出son里面msg的值
    this.$refs.son.say() // 调用son里的say方法

    // 这个算开发技巧，方便改掉子里的数据
    // 不算官方推荐的方式，但是好用，所以开发中还是有很多大量的使用
    this.$refs.son.msg = '我是父传过来的新msg值'
  }
}
</script>

<style>

</style>